import React from 'react'
import './ShopDetail.less'
import Tit from '../../components/Tit.jsx'
import Carousel from '../../components/Carousel.jsx'
import Evaluation from '../../components/Evaluation.jsx'
import { withRouter } from "react-router-dom";
class ShopDetail extends React.Component {

    state = {
        imgUrl: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
        zz: 0,
        GG: true,
        shopDetail: null,
        sPecID: 0,
        num: 1
    }
    jia() {
        this.setState({
            num: this.state.num + 1
        })
    }
    jian() {
        if (this.state.num > 1) {
            this.setState({
                num: this.state.num - 1
            })
        }
    }
    addCart() {
        this.$postData('/api/goods/insertCart', { goodsId: this.state.shopDetail.specList[this.state.sPecID].specId, commonId: this.props.match.params.id, num: this.state.num }, params => {
            console.log(params)
            switch (params.code) {
                case 100:
                    this.Toast.info(params.msg);
                    this.GGCLICK()
                    break;
                default:
                    this.Toast.info(params.msg);
                    break;
            }
        })
    }
    FillOrder() {
        this.props.history.push(`/FillOrder/0/${this.props.match.params.id}/${this.state.shopDetail.specList[this.state.sPecID].specId}/${this.state.num}/''/''`)
    }
    spec(index) {
        console.log(index)
        this.setState({
            sPecID: index
        })
    }
    componentDidMount() {
        this.a = this.$postData('/api/goods/getGoodsById',
            { goodsId: this.props.match.params.id },
            (params) => {
                switch (params.code) {
                    case 100:
                        console.log(params.data)
                        this.setState({
                            shopDetail: params.data
                        })
                        break;
                    default:
                        this.Toast.info(params.msg);
                        break;
                }
            })
    }
    AllEvaluation = () => {
        this.props.history.push('/AllEvaluation/' + this.props.match.params.id)
    }
    GGCLICK = () => {
        this.setState({
            GG: !this.state.GG
        })
    }
    bofang(url) {
        console.log(url)
        window.open(url)
    }
    after(index) {
        this.setState({
            zz: index
        })
    }
    render() {
        return (
            <div className='ShopD' >
                {
                    this.state.shopDetail ? <div>
                        <Tit tit={'商品详情'} zz={false}></Tit>
                        <div className='ShopD-d1'>
                            <Carousel after={this.after.bind(this)} imgHeight={'90vw'} dots={false} ID={'2'} data={this.state.shopDetail.picUrl}></Carousel>
                            {this.state.shopDetail.picUrl[this.state.zz].type == 1 ? <img className='ShopD-d1-i1' src={require("../../static/img/Video.png")} alt="" onClick={this.bofang.bind(this, this.state.shopDetail.picUrl[this.state.zz].videoUrl)} /> : ''}
                            <div className='ShopD-d1-d1'>{this.state.zz + 1}/{this.state.shopDetail.picUrl.length}</div>
                        </div>
                        <p className='xin-center ShopD-p1'>
                            {this.state.shopDetail.goodsCommonName}
                        </p>
                        <p className='xin-center ShopD-p2'>
                            {this.state.shopDetail.goodsTitle}
                        </p>
                        <p className='xin-center ShopD-p3'>
                            ¥{this.state.shopDetail.specList[0].price}
                        </p>
                        <div className='xian'></div>
                        <p className='xin-center ShopD-p4'>
                            用户评价
                </p>
                        <Evaluation Eva={this.state.shopDetail.evaluateVo}></Evaluation>
                        <p className='xin-center ShopD-p6' onClick={this.AllEvaluation}>
                            查看全部{this.state.shopDetail.evaluateNum}条评价
                </p>
                        <div className='xin-center ShopD-d3'>
                            <img src={require('../../static/img/juxing.png')} alt="" />
                            <p>商品详情</p>
                        </div>
                        <div className='ShopD-d8' dangerouslySetInnerHTML={{ __html: this.state.shopDetail.details }}></div>
                        {/* <div className='diandi'></div> */}
                        <div className='ShopD-d4'>
                            <p className='center' onClick={this.GGCLICK}>加入购物车</p>
                            <p className='center' onClick={this.GGCLICK}>立即购买</p>
                        </div>
                        {
                            this.state.GG ? <div className='diandi'></div> : <div className='ShopD-d5'>
                                <div className='ShopD-d5-d1'>
                                    <div className='xin-center'>
                                        <div className='ShopD-d5-d2'>
                                            <img className='ShopD-d5-d2-i1' src={require('../../static/img/guan.png')} alt="" />
                                            <div className='ShopD-d5-d3'>
                                                <img className='ShopD-d5-d3-i1' onClick={this.GGCLICK} src={require('../../static/img/guan.png')} alt="" />
                                                <p className='ShopD-d5-d3-p1'>价格：<i>¥{this.state.shopDetail.specList[this.state.sPecID].price}</i></p>
                                                <p className='ShopD-d5-d3-p2'>已选：{this.state.shopDetail.specList[this.state.sPecID].specInfo}</p>
                                            </div>
                                        </div>
                                        <p className='ShopD-d5-p1'>
                                            规格</p>
                                        <div className='ShopD-d5-d4'>
                                            {this.state.shopDetail.specList.map((val, index) => (
                                                <p key={val.specId} className={this.state.sPecID === index ? 'p-hov center' : 'center'} onClick={this.spec.bind(this,index)}>{val.specInfo}</p>
                                            ))}
                                        </div>
                                        <div className='ShopD-d5-d5'>
                                            <p className='ShopD-d5-p1'>购买数量</p>
                                            <div className='ShopD-d5-d5-d1'>
                                                <div className='center' onClick={this.jian.bind(this)}>
                                                    <img src={require('../../static/img/jian.png')} alt="" />
                                                </div>
                                                <p>{this.state.num}</p>
                                                <div className='center' onClick={this.jia.bind(this)}>
                                                    <img src={require('../../static/img/jia.png')} alt="" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className='ShopD-d4'>
                                        <p className='center' onClick={this.addCart.bind(this)}>加入购物车</p>
                                        <p className='center' onClick={this.FillOrder.bind(this)}>立即购买</p>
                                    </div>
                                </div>
                            </div>
                        }
                        }
                </div> : ''
                }
            </div>
        )
    }
}

export default withRouter(ShopDetail)